<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>后台</title>
</head>
<body>
<div class="banner hidden-sm-down">
	<img class="banner_img" src="img/bg.jpg" />
	<img class="logo" src="img/logo.png" />
</div>
<header class="my-header">
	<nav class="navbar navbar-light bg-faded">
		<div class="container">
			<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
			<a href="/" class="form-inline float-xs-right center">
	        	<img src="img/Personal-Center.png" />
				<span>个人中心</span>
		    </a>
		    <div class="collapse navbar-toggleable-xs" id="navbar-header">
		      <ul class="nav navbar-nav">
		      	<li class="nav-item">
		          <a class="nav-link" href="#">Navbar</a>
		      	</li>
		        <li class="nav-item dropdown">
				    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
				    <div class="dropdown-menu">
				      <a class="dropdown-item" href="#">Action</a>
				      <a class="dropdown-item" href="#">Another action</a>
				      <a class="dropdown-item" href="#">Something else here</a>
				      <div class="dropdown-divider"></div>
				      <a class="dropdown-item" href="#">Separated link</a>
				    </div>
				</li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">Features</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">Pricing</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">About</a>
		        </li>
		      </ul>
		    </div>
		</div>
	</nav>
</header>	
<section class="container table_bg">
	<div class="pd50">
		<div class="layui-form-pane">
		  <div class="layui-form-item">
		    <label class="layui-form-label">日期范围</label>
		    <div class="layui-input-inline time_l">
		      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
		    </div>
		    <div class="layui-input-inline">
		      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
		    </div>
		  </div>
		</div>
		<div class="dropdown sel">
		  <button class="btn btn_list btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    快捷查看
		  </button>
		  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
		    <a class="dropdown-item" href="#">最近1天</a>
		    <a class="dropdown-item" href="#">最近2天</a>
		    <a class="dropdown-item" href="#">最近3天</a>
		  </div>
		</div>
		<form class="form-inline navbar-form pull-right">
			<input class="form-control" type="text" placeholder="搜索">
			<button class="btn btn-success" type="submit">搜索</button>
		</form>
	</div>
	<div class="clearfix"></div>
	<div>
		<div class="table_box">
			<p class="path">首页<span>></span><b>表格</b></p>
			<table class="table table-striped">
			  <caption>共<span>1</span>页，当前第<span>1</span>页</caption>
			  <thead>
			    <tr>
			      <th>名称</th>
			      <th>城市</th>
			      <th>邮编</th>
			      <th>邮编</th>
			      <th>名称</th>
			      <th>城市</th>
			      <th>邮编</th>
			      <th>邮编</th>
			    </tr>
			  </thead>
			  <tbody>
			    <tr>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Sachin</td>
			      <td>Mumbai</td>
			      <td>400003</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Uma</td>
			      <td>Pune</td>
			      <td>411027</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Uma</td>
			      <td>Pune</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Sachin</td>
			      <td>Mumbai</td>
			      <td>400003</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Uma</td>
			      <td>Pune</td>
			      <td>411027</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			    </tr>
			    <tr>
			      <td>Uma</td>
			      <td>Pune</td>
			      <td>411027</td>
			      <td>Tanmay</td>
			      <td>Bangalore</td>
			      <td>560001</td>
			      <td>411027</td>
			      <td>411027</td>
			    </tr>
			  </tbody>
			</table>
			<nav class="page page_pc">
			  <ul class="pagination">
			    <li class="disabled">
			      <a href="#" aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			        <span class="sr-only">Previous</span>
			      </a>
			    </li>
			    <li class="active">
			      <a href="#">1 <span class="sr-only">(current)</span></a>
			    </li>
			    <li><a href="#">2</a></li>
			    <li><a href="#">3</a></li>
			    <li><a href="#">4</a></li>
			    <li><a href="#">5</a></li>
			    <li>
			      <a href="#" aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			        <span class="sr-only">Next</span>
			      </a>
			    </li>
			  </ul>
			</nav>
		</div>
		<nav class="page page_MT none">
		  <ul class="pagination">
		    <li class="disabled">
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		        <span class="sr-only">Previous</span>
		      </a>
		    </li>
		    <li class="active">
		      <a href="#">1 <span class="sr-only">(current)</span></a>
		    </li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		        <span class="sr-only">Next</span>
		      </a>
		    </li>
		  </ul>
		</nav>
	</div>
</section>
</body>
<script src="jquery-3.0.0/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap4/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("#btn").click(function(){
		if($("#nav").css("margin-left")=="-205px"){			
			$("#nav").css('margin-left','0px');
		}else{
			$("#nav").css('margin-left','-205px');			
		}		
	});
</script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  var start = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };
  
  var end = {
    min: laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };
  
  document.getElementById('LAY_demorange_s').onclick = function(){
    start.elem = this;
    laydate(start);
  }
  document.getElementById('LAY_demorange_e').onclick = function(){
    end.elem = this
    laydate(end);
  }
  
});
</script>

</html>
